<template>
  <div>
    <my-layout :menu_key="'3'">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" style="width: 200px;"
                @change="get_project_list"></el-input>
      &nbsp;
      <el-button type="primary" @click="open_add_project_dialog">添加项目</el-button>
      <el-dialog
          title="添加项目"
          :visible.sync="add_project_dialog"
          width="50%"
          :before-close="close_dialog">
        <create-project @create_project_submit="create_project"></create-project>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>
      <el-table
          class="tables"
          :data="project_list"
          style="width: 100%"
          :header-cell-style="{textAlign:'center'}"
          :cell-style="{textAlign:'center'}"
      >
        <el-table-column
            label="小程序名称">
          <template slot-scope="scope">
            <p>{{ scope.row.app_info.name }}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="project_name"
            label="项目名称">
        </el-table-column>
        <el-table-column
            prop="branch"
            label="分支">
        </el-table-column>
        <el-table-column
            label="仓库地址">
          <template slot-scope="scope">
            <el-link type="primary" :href="scope.row.git_url" target="_blank">点击查看</el-link>
            <!--            <a :href="scope.row.git_url">查看</a>-->
          </template>
        </el-table-column>
        <el-table-column
            prop="branch"
            label="代码分支">
        </el-table-column>
        <el-table-column
            prop="deployment_way"
            label="部署方式">
          <template slot-scope="scope">
            <div v-if="scope.row.deployment_way==='手动'">
              <p>手动</p>
            </div>
            <div v-if="scope.row.deployment_way==='自动'">
              <el-button type="primary" icon="el-icon-document-copy" @click="copyUrl(scope.row)">自动</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="perform_before"
            label="编译前命令">
        </el-table-column>
        <el-table-column
            prop="compile_command"
            label="编译命令">
        </el-table-column>
        <el-table-column
            prop="build_path"
            label="编译路径">
        </el-table-column>
        <el-table-column
            prop="is_es_6"
            label="es6">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-row>
              <el-col span="12">
                <el-button type="danger" size="small" @click="delete_project(scope.row)">删除</el-button>
              </el-col>
              <el-col span="12">
                <el-button type="success" size="small" @click="run_build(scope.row)">点击构建</el-button>
              </el-col>
              <!--              <el-col span="12">-->
              <!--                <el-button type="primary" size="small">构建记录</el-button>-->
              <!--              </el-col>-->
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </my-layout>
  </div>
</template>

<script>
import MyLayout from "@/components/MyLayout";
import CreateProject from "@/components/project/CreateProject";
import {CreateWxProject, GetWxProjectList, DeleteWxProject, WxProjectBuild} from "@/request/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Project",
  components: {
    MyLayout,
    CreateProject
  },
  created() {
    this.get_project_list();
  },
  data() {
    return {
      add_project_dialog: false,
      project_list: [],
      page: 1,
      size: 10,
      search: "",
    }
  },
  methods: {
    copyUrl(row) {
      // 模拟 输入框
      var cInput = document.createElement("input");
      cInput.value = "https://wxbuild.feiyuxiaoyuan.com/project/auto/build/"+row.project_id;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      this.$message({
        type: "success",
        message: "复制成功"
      });
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
    },
    close_dialog() {
      this.add_project_dialog = false;
    },
    open_add_project_dialog() {
      this.add_project_dialog = true;
    },
    create_project(form) {
      CreateWxProject(form).then(res => {
        if (res.code == 200) {
          this.$message.success("添加项目成功");
          this.add_project_dialog = false;
          this.get_project_list();
        } else {
          this.$message.error(res.msg);
        }
      })
      // console.log(form)
    },
    get_project_list() {
      let data = {
        page: this.page,
        size: this.size,
        search: this.search
      }
      GetWxProjectList(data).then(res => {
        if (res.code == 200) {
          this.project_list = res.data.list;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    delete_project(row) {
      let data = {
        project_id: row.project_id
      }
      DeleteWxProject(data).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.get_project_list();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    run_build(row) {
      let data = {
        project_id: row.project_id
      }
      WxProjectBuild(data).then(res => {
        if (res.code === 200) {
          this.$message.success("构建成功")
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.tables {
  margin-top: 20px;
}
</style>
